<template>
	<view class="criminal-law">
		<common-navbar title="小律推荐" />
		<view class="search-wrapper">
			<u-input type="text" class="search-input" height="52" placeholder="搜索更多罪名" v-model="keyword"
				@input="$u.throttle(searchChargeBykeyword, 1000)" />
			<u-icon name="search" class="search-icon"></u-icon>
		</view>
		<view class="tabs-wrapper">
			<u-tabs ref="tabs" :list="list" :current="current" height="50" bar-width="56" bar-height="8"
				bg-color="#ffffff" active-color="#4aa1f1" font-size="28" bold gutter="70" @change="change"></u-tabs>
		</view>
		<scroll-view scroll-y class="scroll-view" @scrolltolower="chargeListScrollTolower" v-show="current == 0">
			<recommended :chargeList="chargeList.list" @chooseCharge="chooseCharge" :typeId="typeId"/>
			<u-loadmore :status="chargeList.status" />
		</scroll-view>
		<scroll-view scroll-y class="scroll-view" v-show="current == 1">
			<regulationDetail :regulationList="regulationList" />
		</scroll-view>
		<scroll-view scroll-y class="scroll-view" v-show="current == 2" @scrolltolower="hotTopicListScrollTolower">
			<hotTopic :hotTopicList="hotTopicList.list" />
			<u-loadmore :status="hotTopicList.status" />
		</scroll-view>
	</view>
</template>

<script>
	import recommended from "./components/recommended/recommended.vue";
	import regulationDetail from "./components/regulation-detail/regulationDetail.vue";
	import hotTopic from "./components/hot-topic/hotTopic.vue";
	export default {
		components: {
			recommended,
			regulationDetail,
			hotTopic
		},
		data() {
			return {
				keyword: '',
				current: 0,
				list: [{
					name: '小律推荐',
				}, {
					name: '法规详解',
				}, {
					name: '热点话题',
				}],
				chargeList: {
					list: [],
					pageNum: 1,
					pageSize: 5,
					status: 'loadmore',
				},
				hotTopicList: {
					list: [],
					pageNum: 1,
					pageSize: 10,
					status: 'loadmore',
				},
				regulationList: [],
				articleListType: '',
				typeId: '',
			}
		},
		async onLoad() {
			this.getRegulationList();
			this.getHotTopicList();
			this.getChargeList();
			await this.$loginStatus;
			
		},
		watch: {
			keyword(val) {
				if (!val.length && !this.typeId) {
					this.current = 0;
					this.chargeList.list = []
					this.chargeList.status = 'loadmore';
					this.chargeList.pageNum = 1;
					this.getChargeList();
				}
			}
		},
		methods: {
			async getChargeList(charge_name) {
				if (this.chargeList.status == 'loading' || this.chargeList.status == 'nomore') {
					return
				}
				this.chargeList.status = 'loading';
				let restUrl;
				let options;
				if (this.typeId) {
					restUrl = this.$restUrl.getChargeListByTypeId;
					options = {
						type_id: this.typeId,
					}
				} else {
					restUrl = this.$restUrl.getChargeList
					options = {
						page: this.chargeList.pageNum,
						page_num: this.chargeList.pageSize,
						charge_name: this.keyword,
					}
				}
				const {
					data,
					total
				} = (await this.$u.post(restUrl,options)).data
				this.chargeList.list.push(...data);
				if (this.chargeList.list.length >= total) {
					this.chargeList.status = 'nomore';
				} else {
					this.chargeList.status = 'loadmore';
					this.chargeList.pageNum++;
				}
				console.log('ChargeList>>>>>>>>>>>>>>', this.chargeList.list);
			},
			async getHotTopicList() {
				if (this.hotTopicList.status == 'loading' || this.hotTopicList.status == 'nomore') {
					return
				}
				this.hotTopicList.status = 'loading';
				if (!this.articleListType) {
					const res = await this.$u.post(this.$restUrl.getArticleType);
					this.articleListType = (res.data.find(item => item.name == 'recommended')).id;
				}
				const {
					data,
					total
				} = (await this.$u.post(this.$restUrl.getArticleListByTypeId, {
					page: this.hotTopicList.pageNum,
					page_num: this.hotTopicList.pageSize,
					category_id: this.articleListType,
				})).data
				console.log('hotTopicList>>>>>>>>>>>>>>>>>', data);
				this.hotTopicList.list.push(...data);
				if (this.hotTopicList.list.length >= total) {
					this.hotTopicList.status = 'nomore';
				} else {
					this.hotTopicList.status = 'loadmore';
					this.hotTopicList.pageNum++;
				}
				console.log('hotTopicList>>>>>>>>>>>>>>', this.hotTopicList.list);
			},
			chargeListScrollTolower() {
				this.getChargeList();
			},
			change(index) {
				this.current = index;
			},
			async getRegulationList() {
				const {
					data
				} = await this.$u.post(this.$restUrl.regulationList);
				this.regulationList = data;
			},
			searchChargeBykeyword() {
				this.typeId = '';
				if (this.keyword.length) {
					this.current = 0;
					this.chargeList.list = []
					this.chargeList.status = 'loadmore';
					this.chargeList.pageNum = 1;
					this.getChargeList();
				}
			},
			chooseCharge(type_id) {
				this.typeId = type_id;
				this.current = 0;
				this.chargeList.list = []
				this.chargeList.status = 'loadmore';
				this.chargeList.pageNum = 1;
				this.keyword = '';
				this.getChargeList();
			},
			hotTopicListScrollTolower() {
				this.getHotTopicList();
			}
		}
	}
</script>

<style scoped lang="scss">
	@import "./criminalLaw.scss";
</style>
